<template>
	<ul>
		<li v-for="mv in movieList">
			<div>
				<img :src="mv.img | wh('192.270')" :alt="mv.nm" />
			</div>
			<div>
				<h1>
					{{ mv.nm }}
					<MovieVersion v-if="mv.ver" :ver="mv.ver" />
				</h1>
				<p>{{ mv.cat }}</p>
				<p>{{ mv.desc }}</p>
				<div>{{ mv.showInfo }}</div>
			</div>
			<MovieButton :mv="mv" />
		</li>
	</ul>
</template>

<script>
import Vue from 'vue'
import MovieVersion from './MovieVersion'
import MovieButton from './MovieButton'
import { Skeleton } from 'vant'
Vue.use(Skeleton)
export default {
	props: {
		movieList: {
			type: Array,
			required: true
		}
	},

	components: {
		MovieButton,
		MovieVersion
	},
	data() {
		return {
			showSkeleton: false
		}
	}
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/stylus/border.styl';
@import '~@/assets/stylus/ellipsis.styl';

ul {
  padding-left: 0.12rem;

  li {
    height: 1.14rem;
    display: flex;
    padding: 0.12rem 0.12rem 0.12rem 0;
    border1px(0 0 1px 0);

    > div:first-child {
      width: 0.76rem;

      img {
        width: 0.64rem;
        height: 0.9rem;
      }
    }

    > div:nth-child(2) {
      flex: 1;

      h1 {
        display: flex;
        align-items: center;
        font-size: 0.16rem;
        font-weight: 100;
        ellipsis();
      }

      > p {
        line-height: 0.22rem;
        color: #666;
        ellipsis();
      }

      div {
        line-height: 0.22rem;
        color: #999;
        ellipsis();
      }
    }

    &:last-child {
      border1px(0);
    }
  }
}
</style>